<template>
<div id="wrapper" class="wrapper">
	  <div class="classify_menu"  ref="goodMenu">          
          <ul>
              <li v-for="(item, index) in picList" :key="index"  @click="selectMenu(index,$event)" :class="{'active': currentIndex === index}" ref="lItem">{{item.name}}</li>
          </ul>
      </div>    
      
      <div class="classify_right" ref="goodList">
            <div class="class_ico" ref="ico">                
                <div class="classify_nav"  v-for="(list, index) in picList" :key="index" >
                        <div class="classify_title" @click="_goList(list.name,list.id)"> 
                            <span class="classify_title_name" id="classify_title_name"><span class="class_line"></span> <span class="class_tit">{{list.name}}</span> <span class="class_line"></span></span>
                            <span class="class_all">全部<span class="icons"><div class="right"></div></span></span>
                        </div>
                        <div class="class_category" id="class_category" >
                            <ul>
                                <li  v-for="(items, indexs) in list.subcategories" :key="indexs" @click="_goList(items.name,items.id)">
                                        <img :src="items.logo" :alt="items.name">
                                        <p>{{items.name}}</p>
                                </li>

                                <div class="clear"></div>
                            </ul>
                        </div>
                </div>     
            </div>       
      </div>
      <div class="clear"></div>
      <temp_footer></temp_footer>
  </div>
</template>
<script>
import Bscroll from 'better-scroll'
import  temp_footer from './base.vue'
  export default {
        name: 'Choose',
        data () {
          const that = this;
           return {
               picList:"",
               scrollY: 0,//获取实时滚动位置
               heightList: [],//获取每一个li的高度
               menuList:"",
               goodmenu:"",
            }
        },
        components:{
            "temp_footer":temp_footer,
        },
        created(){
                document.title = '商品选购';
                this.$axios.get('/v1/common/getItemCategory').then(res => {
                        var data=res.data;
                        if(data.code==200){
                            this.picList=data.data;
                        }     
                        this.$nextTick(() => { 
                            this._scrollInit()
                            this._calculateHeight(); // 初始化列表高度列表
                        })                             
                    }, res => {
                       console.log("error");
                });this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
               
        } ,
        methods:{
            //初始化 better-scroll
            _scrollInit(){
                this.menuList = new Bscroll(this.$refs.goodMenu, {
                    probeType: 3,
                    click: true
                });
                // this.menuLs = new Bscroll(this.$refs.goodMenu, {
                    
                // });                
                this.goodmenu = new Bscroll(this.$refs.goodList, {
                    probeType: 3,
                    click: true
                });
                //  this.goodmenus = new Bscroll(this.$refs.goodList, {
                    
                // });
                this.goodmenu.on('scroll', (pos) =>{
                    //获取实时滚动的距离 使用scrollY接收       
                    this.scrollY = Math.abs(Math.round(pos.y));
        
                })
            },
            _calculateHeight() {
                let foodList = this.$refs.goodList.getElementsByClassName('classify_nav');
                let height = 0;
                this.heightList.push(height); 
                for (let i = 0; i < foodList.length; i++) {
                    let item = foodList[i] 
                    height += item.clientHeight
                    this.heightList.push(height);
                }
            },
            scrollToElement() {
                this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
            },
            selectMenu(index,event) {              
                if(!event._constructed) {
                    return ;
                }
                let foodList = this.$refs.goodList.getElementsByClassName("classify_nav");
                let el = foodList[index];
                this.goodmenu.scrollToElement(el,800);
            },
            target(){
              this.$router.push('/transit');
            },
            _goList(e,f){
                this.$router.push({path:'/list',query:{title:e,id:f}});
            },
        },
        computed: {
            currentIndex() {       
                for(let i=0;i< this.heightList.length;i++) {
                    
                    let height1 = this.heightList[i];
                    let height2 = this.heightList[i+1];
                    if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
                      if(this.scrollY>7450){
                          return 16;
                      }else{
                            let menu=this.$refs.goodMenu.getElementsByTagName("li");
                            let nth=i-5;
                            if(nth<=0){
                                nth=0;
                            }
                            let menus=menu[nth];
                            this.menuList.scrollToElement(menus,500);
                            return i; 
                      }                            
                    }
                }
                return 0;
               
            }
        },
         beforeRouteEnter (to, from, next) {
            document.title="商品选购";
            next()
        },       
    }
</script>
<style scoped>
.wrapper{width:100%;height:90%;display: flex;top:0;bottom:100px;position: absolute;overflow: hidden;}
.classify_all{padding-bottom:100px;padding-top:20px;}
.classify_line{border-top:0.6px solid #F2F2F2;width:100%;margin-top:10px;}
.classify span{color:#000000;font-size:28px;margin-left:4%;}
.classify_menu{width:20%;margin-top:40px;}
.classify_menu li{font-size:28px;height:52px;line-height:52px;color:#333334;text-align: center;margin-bottom:46px;}
.classify_menu li.active{color:#333334;background:#FFE514;border-radius:26px;font-weight:bold;}     
.classify_right{width:79%;padding-top:30px;flex:1;}
.class_ico{width:100%;}
.classify_nav{padding-top:18px;}
.classify_right .swiper-container img{width:94%;margin:0 auto;}
.classify_right .classify_title{margin-top:30px;}
.classify_right .classify_title_name{font-size:30px;color:#000000;padding-left:20px;margin-left:20%;}
.classify_right .classify_title_name .class_line{width:70px;height:4px;border-top:0.6px solid #E7E7E7;/*no*/
display:inline-block;position:relative;top:-6px;}
.classify_right .classify_title_name .class_tit{padding:0 16px;}
.class_all{color: #4A4A4A;float:right;margin-right:10%;font-size:22px;margin-top:6px;}
.class_all .icons{position:relative;}
.class_all .icons .right {
    width: 12px;
    height: 12px;
    border-top: 1px solid #979797;/*no*/
    border-left: 1px solid #979797;/*no*/
    position: absolute;
    top:8px;
    left: 6px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.class_category{width:90%;margin:0 auto;margin-top:40px;}
.class_category li{float:left;width:33.3%;margin-bottom:30px;min-height:200px;text-align: center;}
.class_category li img{width:80%;margin:0 auto;}
.class_category li p{line-height:40px;margin:0;color: #4A4A4A;font-size:26px;text-align: center;}
.class_category_no{width:70%;margin:0 auto;}
.class_category_no img{width:100%;}
.class_category_no p{font-size:28px;text-indent:2em;}
</style>
